<template>
	<view class="extension">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#0b0a34"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view class="" v-if="current === 0">
				<view class="list">
					<image src="../../../static/image/满减券bg@2x.png"></image>
					<view class="info">
						<view class="left">
							<text class="title">5元通用券</text>
							<text class="time1">有效期20230411-20240411</text>
							<text class="name">商户名称</text>
							<text class="address">5元通用券地址</text>
						</view>
						<view class="right">
							<text class="orange" @click="useFun">去使用</text>
						</view>
					</view>
					<view class="shuoming">
						<uni-icons type="info" size="30"></uni-icons>
						注：限店内会员用户领取使用
					</view>
				</view>
				<view class="list">
					<image src="../../../static/image/通用券bg@2x.png"></image>
					<view class="info">
						<view class="left">
							<text class="title">5元通用券</text>
							<text class="time2">有效期20230411-20240411</text>
							<text class="name">商户名称</text>
							<text class="address">5元通用券地址</text>
						</view>
						<view class="right">
							<text class="blue">去使用</text>
						</view>
					</view>
					<view class="shuoming">
						<uni-icons type="info" size="30"></uni-icons>
						注：限店内会员用户领取使用
					</view>
				</view>


			</view>
			<view class="" v-if="current === 1">
				<view class="none">
					<image src="../../../static/image/暂无优惠券@2x.png" mode=""></image>
					<text>暂无优惠券</text>
				</view>
			</view>
			<view class="" v-if="current === 2">
				<view class="list had">
					<image src="../../../static/image/已过期券bg@2x.png"></image>
					<view class="info">
						<view class="left">
							<text class="title">5元通用券</text>
							<text class="time3">有效期20230411-20240411</text>
							<text class="name">商户名称</text>
							<text class="address">5元通用券地址</text>
						</view>
						<view class="right">
							<text class="grey">去使用</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="shadow" v-if="isTrue">
			<view class="number">
				<text class="code">096185</text>
				<text class="intro">请至对应门店提供券码核销使用</text>
				<view class="close" @click="closeBtnFun">
					<uni-icons type="closeempty" color="#fff"></uni-icons>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const current = ref(0)
	const items = ref(['全部', '即将过期', '已过期'])
	const isTrue=ref(false)
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
	const useFun=()=>{
		isTrue.value=true
	}
	const closeBtnFun=()=>{
		isTrue.value=false
	}
</script>

<style lang="scss">
	.extension {
		width: 100%;
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		

		.list {
			margin-top: 20px;
			display: flex;
			width: 100%;
			height: 120px;
			position: relative;
			flex-direction: column;

			>image {
				width: 100%;
				height: 120px;
				position: absolute;
				top: 0;
				left: 0;
			}

			.shuoming {
				margin-top: 10px;
				color: #828094;
				font-size: 11px;
			}

			.info {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				padding: 10px;
				box-sizing: border-box;
				z-index: 9;
				.left {
					width: 74%;
					display: flex;
					flex-direction: column;
					color: #fff;
					line-height: 1.5;
					padding: 0px 15% 0px 10px;
					box-sizing: border-box;
					.title {
						font-size: 36rpx;

					}
					.time1 {
						font-size: 22rpx;
						color: #f4a847;
						background: rgba(255, 255, 255, 0.3);
						padding-left: 5px;
						box-sizing: border-box;
					}
					.time2 {
						font-size: 22rpx;
						color: #249ae6;
						background: rgba(255, 255, 255, 0.3);
						padding-left: 5px;
						box-sizing: border-box;
					}
					.time3{
						font-size: 22rpx;
						color: #828094;
						background: #efeff0;
						padding-left: 5px;
						box-sizing: border-box;
					
					}
					// .name {
					// 	font-size: 26rpx;
					// }
					.name {
						font-size: 22rpx;
					}
				}
				.right {
					display: flex;
					flex-grow: 1;
					justify-content: center;
					align-items: center;
					text {
						padding: 10px 20px;
						border-radius: 20px;
						color: #fff;
						border: 1px solid #fff;
						margin-bottom: 15px;

					}
					.orange {
						background: #f4a847;
					}
					.blue {
						background: #4bace8;
					}
					.grey{
						background: #dfdfe1;
						border:1px solid #b6b6b6;
						color: #b6b6b6;
					}
				}
			}

		}
		.had{
			color: #fff;
			>image {
				width: 100%;
				height: 100px;
				
			}	
		}
		.content {
			.none {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 60%
				}
			}
		}
		.shadow{
			width:100%;
			height: 100%;
			position: fixed;
			top:0;
			left: 0;
			background: rgba(0,0,0,0.5);
			z-index: 10;
			.number{
				width:80%;
				height: 150px;
				padding:20px;
				background: #fff;
				box-sizing: border-box;
				border-radius: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
				.code{
					font-size: 30px;
					line-height: 3;
					
				}
				.intro{
					font-size: 14px;
				}
				.close{
					position: absolute;
					left:50%;
					bottom:-50px;
					transform: translateX(-50%);
					z-index:11;
					::v-deep .uniui-closeempty:before{
						font-size:40px !important;
					}
				}
				
			}
		}
	}
</style>